import { Component, OnInit, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { WyySliderStyle } from './wyy-sider-types';

@Component({
  selector: 'app-wyy-slider-track',
  template:  `<div class="wyy-slider-track" [class.buffer]="wyyBuffer" [ngStyle]="trackStyle"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WyySliderTrackComponent implements OnInit, OnChanges {
  trackStyle: WyySliderStyle = {};
  @Input() wyyVertical = false;
  @Input() wyyLength: number;
  @Input() wyyBuffer = false;
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.wyyLength) {
      if (this.wyyVertical) {
        this.trackStyle.height = this.wyyLength + '%';
        this.trackStyle.left = null;
        this.trackStyle.width = null;
      } else {
        this.trackStyle.width = this.wyyLength + '%';
        this.trackStyle.bottom = null;
        this.trackStyle.height = null;
      }
    }
  }
}
